<template>
  <div>
    <div class="row">
      <!-- 请求到数据展示 -->
      <div class="card"
           v-show="searchObj.searchData.length"
           v-for="item in searchObj.searchData"
           :key="item.id">
        <a :href="item.html_url"
           target="_blank">
          <img :src="item.avatar_url"
               style='width: 100px' />
        </a>
        <p class="card-text">{{item.login}}</p>
      </div>
      <!-- 第一次使用，欢迎光临 -->
      <h1 v-show="searchObj.isFirst">欢迎光临</h1>
      <!-- 加载中-->
      <h1 v-show="searchObj.isLoading">正在加载中，请等候</h1>
      <!-- 请求出错 -->
      <h1 v-show="searchObj.errorMsg">{{searchObj.errorMsg}}</h1>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {

    }
  },
  components: {
  },
  // props: ['searchData', 'isLoading', 'isFirst', 'errorMsg'],
  props: ['searchObj'],
  methods: {

  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
.card {
  float: left;
  width: 33.333%;
  padding: 0.75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: 0.75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}
</style>